<template>
  <!-- 下拉选择器 -->
  <el-dropdown trigger="click" @command="changeLanguage">
    <!-- 图标 -->
    <i :class="'iconfont icon-zhongyingwen'" class="toolBar-icon"></i>
    <!-- 下拉菜单 -->
    <template #dropdown>
      <el-dropdown-menu>
        <!-- 遍历语言列表 -->
        <el-dropdown-item v-for="item in languageList" :key="item.value" :command="item.value"
          :disabled="language === item.value">
          <!-- 显示语言标签 -->
          {{ item.label }}
        </el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>

<script setup>
// 导入 Vue I18n 的使用方法
// import { useI18n } from 'vue-i18n';
// 导入 Vue 的计算属性方法
import { computed } from 'vue';
// 导入全局状态管理模块
import { useGlobalStore } from '@/stores/modules/global';

// 使用 Vue I18n 的 hook
// const i18n = useI18n();
// 获取全局状态管理实例
const globalStore = useGlobalStore();

// 计算当前的语言设置
const language = computed(() => globalStore.language);

// 定义语言列表
const languageList = [
  { label: '简体中文', value: 'zh' },
  { label: 'English', value: 'en' }
];

// 更改语言的方法
const changeLanguage = lang => {
  // 设置 Vue I18n 的语言
  // i18n.locale.value = lang;
  // 更新全局状态中的语言设置
  globalStore.setGlobalState('language', lang);
};
</script>